<template>
  <div class="shop-cart-page">
    <!-- 头部标题 -->
    <van-nav-bar title="购物车" left-text="返回" left-arrow @click-left="$goBack" />
    <!-- 购物车内容 -->
      <!-- 没有商品 -->
      <div class="empty-box" v-if="shopCarData.length == 0">
        <van-icon name="smile-o" size="50px" />
        <p>购物车空空如也</p>
        <van-button to="/" type="primary" color="#1baeae" style="width: 180px">跳转首页</van-button>
      </div>
      <!-- 有商品 -->
    <div class="uempty-box" v-if="shopCarData.length > 0">
      <!-- 购物车列表 -->
      <div class="shop-cart-box">
        <!-- <van-checkbox-group v-model="result" ref="checkboxGroup"> -->
        <div class="shop-cart-item" v-for="item in shopCarData" :key="item.goodsId">
          <!-- 多选 -->
          <van-checkbox v-model="item.checked" ></van-checkbox>
          <!-- 图片 -->
          <img :src="item.goodsCoverImg">
          <div class="right-box">
            <!-- 头部标题 -->
            <div class="top">
              <!-- 标题文字 -->
              <span>{{item.goodsName}}</span>
              <!-- 数量 -->
              <span>X{{ item.num }}</span>
            </div>
            <!-- 底部价格 -->
            <div class="bottom">
              <!-- 价格信息 -->
              <span>￥{{ item.sellingPrice }}</span>
              <!-- 数量加成 -->
              <van-stepper v-model="item.num" style="margin-top: 6px;" />
            </div>
          </div>
        </div>
      <!-- </van-checkbox-group> -->
      </div>

      <!-- 底部结算 -->

      <van-submit-bar  :price="totalPrice*100" button-color="#000" button-text="结算"  @submit="submitOrder">


        <van-checkbox v-model="isAllchecked" >全选</van-checkbox>
      </van-submit-bar>
    </div>

    <!-- 底部导航栏 -->

    <van-tabbar class="shop-cart-tabbar" v-model="active" route placeholder flex style="z-index: 999;">
      <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
      <van-tabbar-item icon="apps-o" to="/sort">分类</van-tabbar-item>
      <van-tabbar-item icon="shopping-cart-o" :badge="shopCarData.length" to="/shopcar">购物车</van-tabbar-item>
      <van-tabbar-item icon="contact-o" to="/myui">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<!-- <script>
export default {
  data() {
    return {
      active: 2,
      shopCarData:localStorage.getItem("shopCarData") ? JSON.parse(localStorage.getItem("shopCarData")) :[], //购物车数据存放在浏览器的缓存中去
      shopList:localStorage.getItem("shopList") ? JSON.parse(localStorage.getItem("shopList")) :[],
      checked: false,  //全选选中状态
      value: 1
    };
  },
  computed:{
    totalPrice(){
      let s=0
      this.shopCarData.forEach(item=>{
        //勾选的商品才能参与总价计算
        if(item.checked){
          s+=item.num*item.sellingPrice
        }
      })
      return s
      
    },

  },
  created(){
    this.detailData=this.$route.params
  },
  methods:{
    addshoplist(){
      //将当前商品数据存入缓存
      //detailData
      let arrlist=localStorage.getItem("shopList") ? JSON.parse(localStorage.getItem("shopCarData")) :[]
            this.detailData.num=1
            this.detailData.checked=true
            this.detailData.flag=false
            let newArr=[...arrlist,this.detailData] //...扩展运算符
            localStorage.setItem("shopList",JSON.stringify(newArr))
    }
  },
    onSubmit(){
      if(this.shopCarData.length== 0){
        this.$toast("请选择商品")
      }else{
        this.$dialog.confirm({
          title:"提示",
          message:"您确认支付吗?",
        })
          .then(()=>{
          //     this.shopCarData.forEach(item=>{
          // //勾选的商品才能参与总价计算
          // if(item.checked){
            let arrlist=localStorage.getItem("shopList") ? JSON.parse(localStorage.getItem("shopList")) :[]
            this.detailData.num=1
            this.detailData.checked=true
            this.detailData.flag=false
            let newArr=[...arrlist,this.detailData] //...扩展运算符
            localStorage.setItem("shopList",JSON.stringify(newArr))
          // }
        // })
            this.$router.push("/myorder")
          })
          .catch(()=>{
            let arrlist=localStorage.getItem("shopList") ? JSON.parse(localStorage.getItem("shopList")) :[]
            this.detailData.num=1
            this.detailData.checked=true
            this.detailData.flag=true
            let newArr=[...arrlist,this.detailData] //...扩展运算符
            localStorage.setItem("shopList",JSON.stringify(newArr))
          // }
        // })
            this.$router.push("/myorder")
            
          })
      }
    }


  
}; -->

<script>
export default {
  data() {
    return {
      active: 2,
      shopCarData: localStorage.getItem("shopCarData") ? JSON.parse(localStorage.getItem("shopCarData")) : [],
      detailData: {},  // 声明 detailData
      isAllchecked: true,
    };
  },
  computed: {
    totalPrice() {
      let s = 0;
      this.shopCarData.forEach(item => {
        if (item.checked) {
          s += item.num * item.sellingPrice;
        }
      });
      return s;
    },
    allcheckedComputed() {
      return this.items.every(item => item.checked);
    },
  },
  watch: {
    // 监听单个项目选中状态变化，更新全选状态
    items: {
      deep: true,
      handler() {
        this.isAllchecked = this.allcheckedComputed;
      }
    },
    isAllchecked(newVal) {
      this.shopCarData.forEach((item) => {
          item.checked = newVal;
        });
    },
  },
  methods: {
    submitOrder() {
      if (this.shopCarData.filter(item => item.checked).length === 0) {
        this.$toast("请选择商品");
      } else {
        this.$dialog.confirm({
          title: "提示",
          message: "您确认支付吗?",
        }).then(() => {
          // 这里应该处理提交订单的逻辑，如发送到服务器
          let arrlist=localStorage.getItem("shopCarData") ? JSON.parse(localStorage.getItem("shopCarData")) :[]
          let newArr=[...arrlist]
          localStorage.setItem("shopListTrue",JSON.stringify(newArr))
          localStorage.setItem("shopListAll",JSON.stringify(newArr))
          this.$router.push("/myorder");   
          localStorage.removeItem('shopCarData');
        }).catch(() => {
          let arrlist=localStorage.getItem("shopCarData") ? JSON.parse(localStorage.getItem("shopCarData")) :[]
          let newArr=[...arrlist] 
          localStorage.setItem("shopListFalse",JSON.stringify(newArr))
          localStorage.setItem("shopListAll",JSON.stringify(newArr))
          this.$router.push("/myorder");
          // 用户取消操作
        });
      }
    },
  },
  created() {
    // 如果 detailData 是从路由参数获取的，这里应该正确处理
    this.detailData = this.$route.params.detailData || {};  // 假设路由中有 detailData 参数
  },
}
</script>



<style lang="less">
.uempty-box {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;

  .shop-cart-box {
    flex: 1;
    overflow-y: auto;
    padding: 0 12px;
    margin: 10px;

    .shop-cart-item {
      display: flex;
      align-items: center;
      overflow: hidden;
      margin-bottom: 10px;

      img {
        height: 50px;
        width: 50px;
        margin: 0 16px;
      }

      .right-box {
        flex: 1;
        overflow: hidden;

        .top {
          display: flex;
          align-items: center;

          & span:nth-child(1) {
            flex: 1;
            margin-right: 10px;
            // 溢出隐藏 多余部分...表示
            overflow: hidden;
            display: block;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

        }

        .bottom {
          display: flex;
          align-items: center;
          justify-content: space-between;

          span {
            color: red;
          }
        }
      }
    }
  }
}

.shop-cart-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.empty-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  justify-content: center;
}

.van-submit-bar {
  position: relative;
}

.shop-cart-tabbar {
  position: relative !important;
}
</style>